<template>
	<view>
		<view class="top">
			<image class="bg" src="./static/topbg.png" mode=""></image>
			<view class="top_con">
				<view class="sharebox" @click="clickto('/pages/friend/sharehaib')">
					邀请海报
				</view>
				<view class="con_info flex">
					<image class="avatar" :src="userinfo.avatar" mode=""></image>
					<view class="info_right">
						<view class="name">
							{{userinfo.nickname}}
						</view>
						<view class="Id">
							ID:{{userinfo.user_id}}
						</view>
					</view>
				</view>
				<view class="numbox flex">
					<view class="num_item">
						<view class="num">
							{{data.allInvaterB}}
						</view>
						<view class="name">
							贡献值收益
						</view>
					</view>
					<view class="num_line">

					</view>
					<view class="num_item">
						<view class="num">
							{{data.allPass}}
						</view>
						<view class="name">
							惠积分收益
						</view>
					</view>
					<view class="num_line">

					</view>
					<view class="num_item">
						<view class="num">
							{{data.allInvaterA}}
						</view>
						<view class="name">
							惠值积分收益
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tab_box flex">
			<view class="tabitem" :class="cur==index?'active':''" v-for="(item,index) in tablist" :key="index"
				@click="clicktab(index)">
				{{item}}
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-view">
			<view class="friendlist">
				<view class="frienditem flex" v-for="(item,index) in friendlist" :key="index">
					<image class="avatar" :src="item.avatar" mode=""></image>
					<view class="right flex">
						<view class="rl">
							<view class="name">
								{{item.nickname}}
							</view>
							<view class="time">
								<!-- jointime -->
								{{$u.timeFormat(item.time, 'yyyy-mm-dd hh:MM')}}
								{{item.time}}
							</view>
						</view>
						<view class="rr flex">
							<image v-if="cur==0" class="jf_icon" src="/static/img/proitem/jf.png" mode=""></image>
							<image v-if="cur==1" class="jf_icon" src="/static/img/proitem/jf1.png" mode=""></image>
							{{item.score}}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import {getInvater,getInvaterData} from '@/api/my.js'
	export default {
		data() {
			return {
				tablist: ['1级好友', '2级好友'],
				cur: 0,
				friendlist: [],
				type:'one',
				userinfo:{},
				friendlist1:[],
				friendlist2:[],
				data:{}
			};
		},
		methods: {
			clickto(url) {
				uni.$u.route(url)
			},
			getData(){
				getInvaterData().then(res=>{
					// console.log(res)
					this.data=res.data.data
				})
				getInvater({type:'one'}).then(res=>{
					this.friendlist=res.data.data
					this.friendlist1=res.data.data
				})
				getInvater({type:'two'}).then(res=>{
					this.friendlist2=res.data.data
				})
			},
			clicktab(index){
				this.cur=index
				if(index==0){
					this.friendlist=this.friendlist1
				}
				if(index==1){
					this.friendlist=this.friendlist2
				}
			}
		},
		onLoad() {
			this.userinfo=uni.getStorageSync('userinfo')
			this.getData()
		}
	}
</script>

<style lang="less">
	.top {
		padding: 0 30rpx;
		height: 381rpx;
		position: relative;
		margin-bottom: 40rpx;

		.bg {
			position: absolute;
			width: 689rpx;
			height: 381rpx;
		}

		.top_con {
			position: absolute;
			width: 689rpx;
			height: 381rpx;

			.sharebox {
				position: absolute;
				line-height: 68rpx;
				background: linear-gradient(151deg, #FFD22B, #FFA304);
				box-shadow: 0px 0px 7rpx 0px #F1D53E;
				font-size: 30rpx;
				color: #fff;
				padding: 0 18rpx 0 34rpx;
				top: 66rpx;
				right: 0;
				border-top-left-radius: 34rpx;
				border-bottom-left-radius: 34rpx;
			}

			.con_info {
				padding: 69rpx 0 0 50rpx;
			}

			.avatar {
				width: 116rpx;
				height: 116rpx;
				border-radius: 50%;
				border: 4rpx solid #ffb575;
			}

			.info_right {
				color: #fff;
				margin-left: 24rpx;

				.name {
					font-size: 32rpx;
				}

				.Id {
					font-size: 24rpx;
					margin-top: 14rpx;
				}
			}
		}
	}

	.numbox {
		justify-content: space-around;
		color: #fff;
		margin-top: 60rpx;
		text-align: center;
		
		.num {
			font-size: 40rpx;
		}

		.name {
			font-size: 26rpx;
		}

		.num_item {
			// width: 228rpx;
		}

		.num_line {
			width: 2rpx;
			height: 37rpx;
			background: rgba(211, 214, 219, 0.38);
		}
	}

	.tab_box {
		padding: 0 130rpx;
		border-bottom: 1rpx solid #F4F5F6;
		justify-content: space-between;
		margin-bottom: 25rpx;

		.tabitem {
			padding-bottom: 16rpx;
			border-bottom: 5rpx solid #fff;
			width: fit-content;
			font-size: 26rpx;
			color: #8B8B8B;
			line-height: 30rpx;
		}

		.active {
			font-size: 30rpx;
			font-weight: 800;
			color: #FF720B;
			border-bottom: 5rpx solid #FF720B;
		}
	}

	.friendlist {
		padding: 0 0 0 32rpx;

		.frienditem {
			align-items: flex-end;
			padding-top: 28rpx;
		}

		.avatar {
			margin-right: 30rpx;
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			align-self: flex-start;
		}

		.right {
			flex: 1;
			justify-content: space-between;
			border-bottom: 1rpx solid #DCDCDC;
			padding-bottom: 30rpx;
			height: 90rpx;

			.rl {
				.name {
					font-size: 32rpx;
					color: #333333;
				}

				.time {
					font-size: 24rpx;
					color: #7A7878;
				}
			}

			.rr {
				color: #FB6419;
				font-size: 33rpx;
				font-weight: bold;
				padding-right: 30rpx;

				.jf_icon {
					width: 25rpx;
					height: 25rpx;
					margin-right: 7rpx;
				}

			}
		}
	}

	.scroll-view {
		// height: calc(100vh - 381rpx -45rpx - 30rpx - 16rpx - 5rpx -1rpx);
		height: calc(100vh - 490rpx - 44px - var(--status-bar-height));
		/* #ifdef MP */
		height: calc(100vh - 490rpx - var(--status-bar-height));
		/* #endif */
	}
</style>
